<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/lib/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="js/lib/json2.js"></script>
	<script type="text/javascript" src="js/lib/geoxml3.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/YMap.js"></script>
	<script type="text/javascript" src="js/GSearch.js"></script>
	<script type="text/javascript" src="js/PointOperator.js"></script>
	<script type="text/javascript" src="js/KmlLayer.js"></script>
	
	
	<style type="text/css">
		html,body{
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
			background: url(image/bg.png) repeat-x; 
			color: #fff;
			overflow: hidden;
			
		}
		#top{
			height:110px;
			margin-bottom: 3px;
			position: absolute;
            top: 0px;	
		}
		#center{
		    width:100%;
			background-color:#fff;
			color: #106fc1;
			position: absolute;
			top: 113px;	
            bottom: 33px;	
		}
		#bottom{
		    width:100%;
			height:30px;
			text-align: center;
			color: gray;
			background-color:white;
			position: absolute;
            bottom: 0px;
		}
   	 #map{
			width:100%;
			height:100%;
		}
		/*左面*/
		#left{
			width:300px;
			height:100%;
			float:left;			
		}
			/*右面*/
		#content{
			margin-left:305px;
			height:100%;
		}
		#searchimg{
			width:30px;
			height:30px;
			position: fixed;
			margin-left: 5px;
		}
		
	</style>
  </head>
  <script type="text/javascript" >

  function typeclick()
  {	  
	  $("#search2").css("display","block");
  }
  </script>
  <body>
    <div id="top">
    	<img id="topimg" src="image/head.png">
    </div>
    <div id="center">
    <div id="left">
    		<div id="search">
	    	 	  类型  ：<input type="text" onclick="typeclick();"></input>
	    	 	  <div id="search2" style="display: none; background-color: #0f0; margin-left:55px; margin-right:90px;" >
		    	 	  类型1  <br>
		    	 	  类型2  <br>
		    	 	  类型3  <br>
		    	 	  类型4  <br>
    			</div> 
    		</div> 
    </div> 		
   	<div id="content">	   		
	   		<div id="map"></div>
	   	</div>
    </div>
    <div id="bottom">
    	GoogleMap搜索功能
    </div>
  </body>
</html>
